<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>学籍管理</title>
  <link rel="stylesheet" href="../static/plt/bootstrap-3.4.1/css/bootstrap.css">
  <link rel="stylesheet" href="../static/plt/Font-Awesome-3.2.1/css/font-awesome.css">
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      text-align: center;
      border: 1px solid black;
      padding: 8px;
    }
    .header1{
      font-size: 25px;
    }

    #id1{
      margin-left: 70px;
      margin-top: 1px;
      display: inline-block;
    }
    #id2{
      display: inline-block;
    }
    #panel {
      display: none;
      width: 800px;
      height: 600px;
      background-color: lightblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
<div>
  <div class="panel panel-default">
    <div id="id2">
      <div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>  <span class="header1">     学籍管理</span></div>
    </div>
    <div id="id1">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          操作选择
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li role="separator" class="divider"></li>
          <li><a href="#" id="addinfo">添加信息</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#" id="search">查询信息</a></li>
          <li role="separator" class="divider"></li>
          <li><a id="save" href="{{ url_for('saveStudent') }}" >导出数据</a></li>
          <li role="separator" class="divider"></li>
          <li ><a href="{{ url_for('returnMain', name='管理员') }}">返回</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<form method="post" action="/info/addinfo">
<div>
  <div id="panel">
    <div><div class="alert alert-success" role="alert">添加学生学籍信息</div></div>
    <div class="row show-grid">
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >学籍号</label>
    <input type="text" class="form-control" name="GId" placeholder="输入学籍号...">
  </div>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >学号</label>
    <input type="text" class="form-control" name="sId" placeholder="输入学号...">
  </div>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >姓名</label>
    <input type="text" class="form-control" name="sName" placeholder="输入姓名...">
  </div>
    </div>
  </div>
      <div>
    <div class="row show-grid">
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >性别</label>
    <input type="text" class="form-control" name="sGender" placeholder="输入性别...">
  </div>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >出生日期</label>
    <input type="text" class="form-control" name="sDate" placeholder="输入出生日期...">
  </div>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >民族</label>
    <input type="text" class="form-control" name="sNation" placeholder="输入民族...">
  </div>
    </div>
  </div>
        <div class="row show-grid">
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >学院</label>
    <input type="text" class="form-control" name="sSchool" placeholder="输入学院...">
  </div>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >专业</label>
    <input type="text" class="form-control" name="sSpeciality" placeholder="输入专业...">
  </div>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >班级</label>
    <input type="text" class="form-control" name="sClass" placeholder="输入班级...">
  </div>
    </div>
  </div>
        <div class="row show-grid">
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >宿舍号</label>
    <input type="text" class="form-control" name="sDormitory" placeholder="输入宿舍号...">
  </div>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >联系方式</label>
    <input type="text" class="form-control" name="sMobile"  placeholder="输入联系方式...">
  </div>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >家庭地址</label>
    <input type="text" class="form-control" name="sAddress" placeholder="输入家庭地址...">
  </div>
    </div>
  </div>
  <button style="margin-left: 200px;margin-top: 100px"  id="btnClose1" type="submit" class="btn btn-default btn-info">添加</button>
  <button style="margin-left: 300px;margin-top: 100px" id="btnClose" type="button" class="btn btn-default btn-danger ">取消</button>
    </div>
  </div>
</div>
</form>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>查询信息</h2>
    <form>
      <label for="inputInfo">输入信息：</label>
      <input type="text" id="inputInfo" name="inputInfo">
      <br><br>
      <button type="button" id="confirmBtn">确认</button>
      <button type="button" id="cancelBtn">取消</button>
    </form>
  </div>
</div>

<div class="panel-body">
  <table class="table table-bordered" id="data-table">
    <thead>
    <tr>
      <th >学籍号</th>
      <th >学号</th>
      <th >姓名</th>
      <th >性别</th>
      <th >出生日期</th>
      <th >民族</th>
      <th >学院</th>
      <th >专业</th>
      <th >班级</th>
      <th >宿舍号</th>
      <th >联系方式</th>
      <th >家庭地址</th>
      <th >操作</th>
    </tr>
    </thead>
    <tbody>
      {% for item in data %}
      <tr >
      <td>{{item['学籍号'] }}</td>
      <td>{{item['学号'] }}</td>
      <td>{{item['姓名'] }}</td>
      <td>{{item['性别'] }}</td>
      <td>{{item['出生日期'] }}</td>
      <td>{{item['民族'] }}</td>
      <td>{{item['学院'] }}</td>
      <td>{{item['专业'] }}</td>
      <td>{{item['班级'] }}</td>
      <td>{{item['宿舍号'] }}</td>
      <td>{{item['联系方式'] }}</td>
      <td>{{item['家庭地址'] }}</td>
      <td>
       <button  onclick="editTable()" type="submit" class="update btn btn-warning btn-sm "><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;修改&nbsp;&nbsp;&nbsp;</button><button type="submit" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;</button>
      </td>
      {% endfor %}
    </tr>
    </tbody>
  </table>
</div>

<script src="../static/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="../static/plt/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="script.js"></script>
<script>

  // 出现
  document.getElementById('addinfo').addEventListener('click', function() {
    var panel = document.getElementById('panel');
    panel.style.display = 'block';
  });
  // 隐藏
  document.getElementById('btnClose').addEventListener('click', function() {
    var panel = document.getElementById('panel');
    panel.style.display = 'none';
});
</script>
<script>

$('#save').on("click",function (){
  alert("导出成功");
})

$(".delete").on("click", function() {
  if (confirm("是否删除此条数据？")) {
    var studentId = $(this).closest("tr").find("td:eq(0)").text(); // 假设学籍号位于第一列
    $.ajax({
      url: "/delete", // 后端API地址
      type: "POST",
      data: { id: studentId },
      success: function(response) {
        // 处理成功的情况，例如提示用户删除成功
        alert("删除成功,刷新网页查看最新结果");
      },
      error: function(xhr, status, error) {
        // 处理错误的情况，例如提示用户删除失败
        alert("删除失败：" + error);
      }
    });
  } else {
    ;
  }
});
$(".update").on("click", function() {
   if (confirm("是否修改此条数据？")) {
    var row = $(this).closest("tr");
    row.find("td:not(:last-child)").attr("contentEditable", "true");
    row.find("td:first-child").attr("contentEditable", "false");
    row.find("td:nth-child(2)").focus();
    } else {
        // 不进行任何操作
    }
  });
$("body").on("keydown", function(e) {
  if (e.keyCode === 13) {
    var row = $(e.target).closest("tr");
    row.find("td:not(:last-child)").attr("contentEditable", "false");
    var modifiedData = [];
    row.find("td:not(:last-child)").each(function() {
    modifiedData.push($(this).text());
  });
  $.ajax({
    url: '/update',
    type: 'POST',
    data: JSON.stringify({data: modifiedData}),
    contentType: 'application/json; charset=utf-8',
    success: function(response) {
          alert("更新成功,刷新网页查看最新结果");
    },
    error: function(error) {
        alert("更新失败：" + error);
  }
});
  }
});

// 获取模态框元素
var modal = document.getElementById("myModal");
// 获取查询信息按钮元素
var btn = document.getElementById("search");
// 获取关闭按钮元素
var span = document.getElementsByClassName("close")[0];
// 当用户点击查询信息按钮时，显示模态框
btn.onclick = function() {
  modal.style.display = "block";
}
// 当用户点击关闭按钮时，隐藏模态框
span.onclick = function() {
  modal.style.display = "none";
}
// 当用户点击确认按钮时，执行相应操作
document.getElementById("confirmBtn").onclick = function() {
  var inputInfo = document.getElementById("inputInfo").value;
  $.ajax({
    url: '/search',
    type: 'POST',
    data: JSON.stringify({data: inputInfo}),
    contentType: 'application/json; charset=utf-8',
     success: function(response) {
       alert("查询结果：" + response.message);
     },
     error: function() {
                            alert("查询失败，请重试。");
                        }
});modal.style.display = "none";
}
// 当用户点击取消按钮时，隐藏模态框
document.getElementById("cancelBtn").onclick = function() {
  modal.style.display = "none";}
</script>
</body>
</html>